<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件通信-父组件向子组件传递数据</title>
</head>
<body>
<div id="app">
  <!--:propmessage="message" -->
  <cpn :propmessage="message" :propmovies="movies" :propemail="email" :propperson="Person"></cpn>
</div>

<template id="cpn-template">
  <div>
    <h2>{{propmessage}}</h2>
    <ul>
      <li v-for="item in propmovies">{{item}}</li>
    </ul>
    <input type="text" placeholder="请输入邮箱地址" :value="propemail">
    <p>{{propperson}}</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  const cpn = {
    template: '#cpn-template',
    // 一、用数组的方式标明传递的变量，一般不用这种写法
    // props:['propmessage','propmovies']

    // 二、对象的额方式标明传递的变量，常用，并且含有多种属性
    props: {
      // 1.简单的类型限制，变量只可以接收指定类型的值
      /*propmessage:String,
      propmovies:Array*/
      // 2.含有其他的属性定义
      propmessage: {
        // 指定的类型
        type: String,
        // type: [String,Number], // 指定多个可能的类型
        // 变量的默认值,当组件没有对改属性进行:propmessage="message" 绑定时，组件会用默认值代替
        default: "Hello Vue",
        // 是否必填，不能为空，如果为空，会输出默认值，但也会报错Missing required prop: "propmessage" found in---> <Cpn>
        required: true
      },
      propmovies: {
        type: Array, //指定类型为数组
        default() {  // 变量类型为 对象或者数组时，默认值必须是一个函数
          return []
        }
      },
      // 自定义验证函数(好像还不灵)
      propemail: {
        type: String,
        validator(value) {
          if (value != null && value != "") {
            console.log('邮箱验证中。。。');
            let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            if (reg.test(value)) {
              console.log('可以的。。');
              return true;
            }
            console.log('不可以的。。');
            return false;
          }
        },
        default: 'default@163.com'
      },
      // 自定义类型
      author: Person,
      // 使用自定义的类型
      propperson: {
        type: Person,
        default() {
          return {firstName: "defaultFirst", lastName: "personName"}
        }
      }


    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      message: '看什么电影',
      movies: ['海贼王', '海王', '西游记', '龙珠'],
      email: '123456@163.com',
      Person: {
        firstName: "张",
        lastName: "三"
      }
    },
    components: {
      // 'cpn' : cpn
      cpn // 字面量的增强性写法
    }
  });
</script>
</body>
</html>
